<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="<s:url value="/view/common_view/css/style.css"/>"rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<s:url value="/view/common_view/js/jquery-1.7.1.min.js"/>"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title><s:property value="getText('title.lichsudathang')"/></title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<script type="text/javascript">
$(document).ready(function() {
	var status = false;
      $(".btnDelete").click(function() {
          var orderID = $(this).attr('orderID');
          $('#orderID').val(orderID);
          var dealName = $(this).attr('dealName');
          $('#dealName').html(dealName);
          if(status == false){
          	$("#dialog-confirm").slideToggle(100);
          	status = true;
          }
        });
      $('#btnHuyBo').click(function(){
    	  $("#dialog-confirm").slideToggle(100);
    	  status = false;
      });
});

	function Show_OrderListBySelect() {

		var e = document.getElementById("sNumHistory");
		var selectedType = e.options[e.selectedIndex];

		if (selectedType.value == "all") {
			window.location = "\order-history.html?userID=<s:property value="%{userID}"/>"+ "&selected=all";
		}
		
		if (selectedType.value == "10") {
			window.location = "\order-history-10.html?userID=<s:property value="%{userID}"/>"+ "&selected=10";
		} 
		
		if (selectedType.value == "20") {
			window.location = "\order-history-20.html?userID=<s:property value="%{userID}"/>"+ "&selected=20";
		}
		
		if (selectedType.value == "30") {
			window.location = "\order-history-30.html?userID=<s:property value="%{userID}"/>"+ "&selected=30";
		} 
	}
</script>
​
<script>
 $(function() {
   $( document ).tooltip({
     position: {
       my: "center bottom-12",
       at: "center top",
       using: function( position, feedback ) {
         $( this ).css( position );
         $( "<div>" )
           .addClass( "arrow" )
           .addClass( feedback.vertical )
           .addClass( feedback.horizontal )
           .appendTo( this );
       }
     }
   });
 });
</script>
</head>

<body>
	<div id="dialog-confirm" title="<s:property value="getText('label.xacnhan')"/>"
		style="height: 80px; display: none; border: 2px solid darkturquoise; border-radius: 10px 10px 10px 10px; padding-top: 25px;">
		<s:form method="post" action="cancel-orderdeal">
			<p>
				<s:property value="getText('p.huy')"/> <b><span id=dealName> </span></b> <s:property value="getText('p.khong')"/>
			</p>
			<input id="orderID" type="hidden" name="orderID" />
			<button type="submit" class="btn btn-success" title="Nhấn để hủy deal đã đặt"><s:property value="getText('button.dongy')"/></button>
			<button type="button" id="btnHuyBo" class="btn btn-warning" title="Nhấn để không hủy deal đã đặt"><s:property value="getText('button.huy')"/></button>
		</s:form>
	</div>
	
	<div id="maincontent">
		<div id="orderdealhistory" class="cHistory">
			
				<div id="history-title"><s:property value="getText('title.lichsudathang')"/></div>
				<div id="thongbao1" class="thongbao">
					<div style="color: red" id="message">
						<s:iterator value="arrErrorMessage" status="stt">
							<s:property value="arrErrorMessage.get(#stt.index)" />
							<br />
						</s:iterator>
					</div>
					<div style="color: blue" id="succesmessage">
						<s:property value="successmessage"/>
					</div>
					<hr/>
				</div>
				<div id="ListOrder" class="history-inner">
					<div class="history-order">
						<div class="table-header">
							<span id="order-number"><s:property value="getText('span.stt')"/></span> 
							<span id="order-name"><s:property value="getText('span.sp/dv')"/></span> 
								<span id="order-date"><s:property value="getText('span.ngaydat')"/></span> 
								<span id="order-ammount"><s:property value="getText('span.soluong')"/></span> 
								<span id="order-cost"><s:property value="getText('span.thanhtien')"/></span> 
								<span id="order-status"><s:property value="getText('span.trangthai')"/></span> 
								<span id="delete-edit"></span> <i class="line-hor"></i>
						</div>
						<div id="ListOrderDetail" class="body-order">
							
								<s:iterator value="history_li" var="orderhistory" status="row">
									<%-- <input type="hidden" name ="orderID" value ='<%=request.getParameter("orderID") %>'/> --%>
									<div class="order-row">
										<s:form method="post" action="order-history">
										<span id="number-value"><s:property value="%{#row.index+1}"/></span> 
										<span id="name-value" class="cName-value">
										<i>
											<a href="view-detail-deal.html?dealID=<s:property value="%{dealID}"/>" title="Nhấn để xem thông tin chi tiết deal"><s:property value="dealName"/></a>
										</i>
										</span> 
										<span id="date-value" class="date-value"><s:property value="dateTime"/></span>
										<span id="ammount" class="cAmmount"><s:property value="numberOrder"/></span> 
										<span id="cost" class="cCost"><s:property value="newTotalMoney"/><s:property value="%{currencyName}" /></span> 
										<span id="status-value" class="status-value"><s:property value="orderStatus"/></span> 
										<span id="edit-delete" class="cEdit-delete"> 
										<span id="edit">
											<s:if test="orderStatusID==3">
												<a href="edit-order.html?
													dealID=<s:property value="%{dealID}"/>&
													orderID=<s:property value="%{orderID}"/>&
													numberOrder=<s:property value="%{numberOrder}"/>
													">
														<div id="btnEdit" class="btnEdit" title="Nhấn để chỉnh sửa số lượng deal đã đặt"></div>
												</a>
											</s:if>
											<s:else>
												<button id="btnEdit2" class="button"></button>
											</s:else>
										</span> 
									<span id="delete"> 
											<s:if test="orderStatusID==3">
												<input type="hidden" name = "orderID" value ='<s:property value="%{orderID}"/>'/>
												<input type="hidden" name="dealID" value='<s:property value="%{dealID}"/>' /> 
												<input type="hidden" name="dealName" value='<s:property value="%{dealName}"/>' />
												<input type="hidden" name="numberOrder" value='<s:property value="%{numberOrder}"/>' />
												<button type="button" id="btnDelete" class="btnDelete"
														orderID='<s:property value="%{orderID}" />'
														dealName='<s:property value="%{dealName}" />' title="Nhấn để hủy deal đã đặt">
												</button>
											</s:if> 
											<s:else>
												<button type="button" id="btnDelete2" class="button" value=""></button>
											</s:else>										
										</span>
										</span>
										</s:form>
									</div>
							</s:iterator>
						</div>
					</div>
					
					<div id="view-infor" class="number-view">
					<s:form method="post" action="order-history">
					<s:iterator id="orderNumber" value="orderNumber" var="num" status="nums">
						<span id="actual-number" class="cActual-number">
						<span id="nText"><s:property value="getText('span.hienthi')"/> 1-</span>
						<span id="nActual"><s:property value="#num" /></span>
						</span> 
					</s:iterator>						
						<span id="expected-number" class="cExpected-number"> 
						<span id="xem"><s:property value="getText('span.xem')"/></span> <span id="combo" class="cCombo">
						<input type="hidden" name = "selected" value ='<s:property value="%{selected}"/>'/>
						<s:if test="selected==all||selected=='all'">
						<select id="sNumHistory" onchange="Show_OrderListBySelect()">
									<option value="all" selected><s:property value="getText('option.tatca')"/></option>
									<option value="10" >10</option>
									<option value="20" >20</option>
									<option value="30" >30</option>			
						</select>
						</s:if>
						
						<s:if test="selected==10">
						<select id="sNumHistory" onchange="Show_OrderListBySelect()">
									<option value="all"><s:property value="getText('option.tatca')"/></option>
									<option value="10" selected>10</option>
									<option value="20" >20</option>
									<option value="30" >30</option>			
						</select>
						</s:if>	
						
						<s:if test="selected==20">
						<select id="sNumHistory" onchange="Show_OrderListBySelect()">
									<option value="all"><s:property value="getText('option.tatca')"/></option>
									<option value="10" >10</option>
									<option value="20" selected>20</option>
									<option value="30" >30</option>			
						</select>
						</s:if>	
						
						<s:if test="selected==30">
						<select id="sNumHistory" onchange="Show_OrderListBySelect()">
									<option value="all"><s:property value="getText('option.tatca')"/></option>
									<option value="10" >10</option>
									<option value="20" >20</option>
									<option value="30" selected>30</option>			
						</select>
						</s:if>																		
						</span> 
						<span id="deal"><s:property value="getText('span.dondat')"/></span>
						</span>
						</s:form>
					</div>
				</div>
				<div id="status-note" class="history-note">
					<div id="note"><s:property value="getText('label.chuthich')"/>:</div>
					<!-- status 1-->
					<div id="status1" class="cStatus1">
						<span id="status-name1">- <s:property value="getText('span.dangcho')"/> :</span> 
						<span id="status1-infor"><s:property value="getText('span.dangcho1')"/>
							</span>
					</div>
					<!-- status 2-->
					<div id="status2" class="cStatus2">
						<span id="status-name2">- <s:property value="getText('span.dahuy')"/> :</span> 
						<span id="status2-infor"><s:property value="getText('span.huy1')"/></span>
					</div>
					<!-- status 3-->
					<div id="status3" class="cStatus3">
						<span id="status-name3">- <s:property value="getText('span.hoantat')"/> :</span> 
						<span id="status3-infor"><s:property value="getText('span.hoantat1')"/></span>
					</div>
				</div>
		</div>
	</div>
</body>
</html>